<script setup>
import {ref} from "vue";
// import "animate.css"
defineOptions({
  name: "Animate"
})
const List = ref(['animate__animated', ' animate__slideInLeft', ' animate__delay-1s', ' animate__faster', 'animate__repeat-1', 'classStyle',])
const isClass = ref(false)

function handleClick(booler) {
  isClass.value = booler
}

</script>

<template>
  <div>
    <p>animate.css和vue的transition有冲突，width有时候无法响应</p>
    <p>animate__animated 指定使用animate.css中的动画效果</p>
    <p>animate__zoomIn 指定使用animate.css中的放大进入动画效果,<span style="color: red">根据官网更换其他动画</span></p>
    <p>animate__delay-2s 设置动画延迟播放时间，此处为2s，还可设置为1s，2s，3s，4s，5s</p>
    <p>animate__slower 设置动画的速度，此处为最慢的slower，还可以设置为slower，slow，fast，faster</p>
    <p>animate__repeat-2 设置动画播放次数，此处为2次，还可以设置为 1, 2, 3 。若想无限循环播放，使用 animate__infinite</p>
    <p>无论vue2还是vue3最简洁的不报warming方式所有的东西套在div里边</p>


    <div @mouseover="handleClick(true)" @mouseout="handleClick(false)">
      <div>2秒后缓慢放大进入（播放2次）</div>
      <div :class="isClass?List:''"></div>
    </div>
    <div @mouseover="handleClick(true)" @mouseout="handleClick(false)">
      <div>2秒后缓慢放大进入（播放2次）</div>
      <div :class="isClass?List:''"></div>
    </div>
    <div @mouseover="handleClick(true)" @mouseout="handleClick(false)">
      <div>2秒后缓慢放大进入（播放2次）</div>
      <div :class="isClass?List:''"></div>
    </div>
    <div class="nameClass1">
      <span>你好</span>
      <div class="nameClass2"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.classStyle {
  background-color: #1c84c6;
  height: 2px;
  width: 20%

}

.nameClass1 {
  width: 100px;
  height: 10px;
  transition: none;
}

.nameClass1:hover .nameClass2 {
  animation: lineAppear 2s ease-in-out forwards;
}
@keyframes lineAppear {
  0% {
    height: 2px;
    width: 0;
    background-color: red;

  }
  100% {
    height: 2px;
    width: 100%;
    background-color: red;
  }

}
</style>
